<template>
    <view style="height: 100%">
        <!-- pages/order/order.wxml -->
        <!-- 电量栏高度 -->
        <!-- <view class="" :style="'height:' + statusBarHeight + 'px; background-color: #000;'"></view> -->
        <!-- 门店列表 -->
        <!-- <view class="" style="background-color: #000"><view class="header">门店列表</view></view> -->
		

        <view class="nav-bar">
            <view class="nav-bar-title" @tap="nearby">
                <view :class="slide == true ? 'title-bolder' : ''" id="1" style="margin-right: 30rpx">附近门店</view>
                <view @tap="often" id="2" :class="slide == false ? 'title-bolder' : ''">常去门店</view>
                <view class="slide2" :style="'left: ' + (slide == true ? '25rpx' : '180rpx') + ';'"></view>
            </view>

            <view class="search" @tap="searchmap">
                <image src="/static/image/vip/fangdajing.png" mode="widthFix"></image>
                <view class="">搜索门店</view>
            </view>
        </view>
        <map id="myMap" class="mapditu" :longitude="longitude" :latitude="latitude" v-if="closemap" :markers="markers" show-location>
            <!--  -->
            <view v-if="closemap" @tap="moveToLocation" class="posimap"><image src="/static/image/vip/dingwei.png" mode="widthFix"></image></view>
        </map>
        <!-- 定位按钮 -->

        <!-- 收起地图 -->
        <view class="closemap" @tap="closemapFun">
            <view class="" v-if="closemap">
                <text>收起地图</text>
                <u-icon name="arrow-up" />
            </view>
            <view class="" v-if="closemap == false">
                <text>打开地图</text>
                <u-icon name="arrow-down" />
            </view>
        </view>
        <!-- 循环店家列表 -->
        <scroll-view scroll-y class="slide-order" style="height: 500px">
            <view @tap="showsolid" :data-index="item.id" class="order-title" v-for="(item, index) in markers" :key="item.id">
                <view class="left">
                    <view class="left1">{{ item.name }}</view>
                    <view class="left2">21321321321321</view>
                    <view class="left3">营业时间：09:30-22:30</view>
                    <view class="left4">营业中</view>
                </view>

                <view class="right">
                    <view class="right1">距离418m</view>
                    <view class="right2">
                        <u-icon name="location" color="red" />
                        <u-icon name="phone" color="red" />
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 弹出层 -->
        <!-- <u-popup v-model="showslide" :show="showslide" position="bottom" custom-style="height: ;" @close="onClose" :round="true" :onClose="showslide" close-on-click-overlay> -->
        <u-popup v-model="showslide">
            <view class="slogan">我们门店很多千万不要选错哦</view>
            <view class="left1 left-title">{{ markers[slidenums].name }}</view>
            <view class="left2 left-title">21321321321321</view>
            <map name="" class="tanchumap" :markers="markers" :latitude="markers[slidenums].latitude" :longitude="markers[slidenums].longitude"></map>
            <!-- 按钮组件 -->
            <u-button type="primary" size="normal" color="rgb(255, 144, 144)" custom-style="width:90%; margin-left:5%; margin-top:20rpx" @click="neworder">进入菜单</u-button>
            <!-- <u-button  @click="neworder">进入菜单</u-button> -->
        </u-popup>
    </view>
</template>

<script>
// import vanIcon from './@vant/weapp/icon/index';
// import vanPopup from './@vant/weapp/popup/index';
// import vanButton from './@vant/weapp/button/index';
// pages/order/order.js
export default {
    // components: {
    //     vanIcon,
    //     vanPopup,
    //     vanButton
    // },
    data() {
        return {
            markers: [
                {
                    id: 1,
                    latitude: 28.65619,
                    longitude: 115.87683,
                    height: '40rpx',
                    width: '30rpx',
                    zIndex: 1,
                    name: '蜜雪冰城(洪城店)'
                },
                {
                    id: 2,
                    latitude: 28.670778,
                    longitude: 115.940528,
                    height: '40rpx',
                    width: '30rpx',
                    name: '蜜雪冰城(上海路店)'
                },
                {
                    id: 3,
                    latitude: 28.674836,
                    longitude: 115.888463,
                    height: '40rpx',
                    width: '30rpx',
                    name: '蜜雪冰城(步行街店)'
                },
                {
                    id: 4,
                    latitude: 28.675,
                    longitude: 115.899978,
                    height: '40rpx',
                    width: '30rpx',
                    name: '蜜雪冰城(八一公园店)'
                },
                {
                    id: 5,
                    latitude: 28.660685,
                    longitude: 115.910423,
                    height: '40rpx',
                    width: '30rpx',
                    name: '蜜雪冰城(井冈山大道)'
                },
                {
                    id: 6,
                    latitude: 28.662607,
                    longitude: 115.87992,
                    name: '蜜雪冰城(抚生路店)',
                    height: '40rpx',
                    width: '30rpx'
                },
                {
                    id: 7,
                    latitude: 28.659918,
                    longitude: 115.889,
                    name: '蜜雪冰城(桃苑店)',
                    height: '40rpx',
                    width: '30rpx'
                },
                {
                    id: 8,
                    latitude: 28.670418,
                    longitude: 115.8884,
                    name: '蜜雪冰城(孺子路)',
                    height: '40rpx',
                    width: '30rpx'
                },
                {
                    id: 9,
                    latitude: 28.66289,
                    longitude: 115.89879,
                    name: '蜜雪冰城(绳金塔店)',
                    height: '40rpx',
                    width: '30rpx'
                }
            ],

            statusBarHeight: uni.db.statusbarhright,

            //电量栏高度
            slide: true,

            closemap: true,
            longitude: null,
            latitude: null,
            showslide: false,
            slidenums: null,
            name: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady(e) {
        this.mapCtx = uni.createMapContext('myMap');
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        uni.getLocation({
            type: 'wgs84',
            success: (res) => {
                // console.log(res);
                this.setData({
                    latitude: res.latitude,
                    longitude: res.longitude
                });
            }
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        nearby(e) {
            console.log(e.target.id);
            let nav = e.target.id;
            if (nav == 1) {
                this.setData({
                    slide: true
                });
            } else {
                this.setData({
                    slide: false
                });
            }
        },

        searchmap() {
            uni.chooseLocation({
                latitude: this.latitude,
                longitude: this.longitude,
                success: (res) => {
                    console.log(res);
                    this.setData({
                        latitude: res.latitude,
                        longitude: res.longitude
                    });
                }
            });
        },

        closemapFun() {
            if (this.closemap == true) {
                this.setData({
                    closemap: false
                });
            } else {
                this.setData({
                    closemap: true
                });
            }
        },

        showsolid(e) {
            console.log(e.target.dataset.index);
            // console.log(this.showslide);
            this.setData({
                showslide: true,
                slidenums: e.target.dataset.index - 1
            });
        },

        neworder() {
            uni.navigateTo({
                url: `/pages/newoder/newoder`,
                // 打开点餐页面，传入店面数据，渲染店面菜品内容
                success: (res) => {
                    // console.log(res);
                    let arr = this.markers[this.slidenums];
                    //将信息传入新页面，在新页面监听acceptDataFromOpenerPage
                    res.eventChannel.emit('acceptDataFromOpenerPage', {
                        arr
                    });
                }
            });
        },

        onClose() {
            this.setData({
                showslide: false
            });
        },

        moveToLocation() {
            // console.log(this.mapCtx);
            // console.log(this.data.markers);
            this.mapCtx.moveToLocation();
        },

        often() {
            console.log('占位：函数 often 未声明');
        }
    }
};
</script>
<style>
/* pages/order/order.wxss */
page {
    background: rgb(255, 255, 255);
}
.header {
    height: 80rpx;
    text-align: center;
    font-weight: bolder;
    line-height: 80rpx;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    background: #fff;
}
.nav-bar {
    display: flex;
    justify-content: space-between;
    padding: 15rpx 30rpx;
    align-items: center;
    background: #fff;
}
.nav-bar-title {
    display: flex;
    position: relative;
}
.nav-bar .search {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10rpx 20rpx;
    border-radius: 30rpx;
    background: rgb(233, 233, 233);
    color: rgb(169, 169, 170);
    font-size: 25rpx;
}
.nav-bar .search image {
    width: 30rpx;
}
.title-bolder {
    font-weight: bolder;
}
.slide2 {
    content: '';
    height: 6rpx;
    width: 80rpx;
    background: rgb(235, 64, 64);
    position: absolute;
    top: 50rpx;
    left: 180rpx;
    border-radius: 30rpx;
    transition: left 0.5s;
}
/* 地图 */
.mapditu {
    width: 100%;
    height: 430rpx;
}
.closemap {
    text-align: center;
    color: #b6b3b3;
    padding: 10rpx 0;
}
.posimap image {
    width: 60rpx;
    position: absolute;
    left: 90%;
    bottom: 5%;
    background: rgb(255, 255, 255);
    border-radius: 50rpx;
}
/* 店家列表 */
.slide-order {
    background: rgb(236, 236, 236);
}
.order-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 15rpx;
    background: #fff;
    margin: 30rpx 20rpx;
    border-radius: 15rpx;
}
.left2,
.left3 {
    color: #b6b3b3;
    font-size: 25rpx;
}
.left4 {
    background: red;
    display: inline-block;
    padding: 5rpx 10rpx;
    font-size: 20rpx;
    color: #fff;
    border-radius: 5rpx;
}
.right1 {
    font-size: 20rpx;
    color: #b6b3b3;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
}
.right2 {
    text-align: center;
    margin-right: 30rpx;

    display: flex;
    justify-content: space-between;
}
/* 弹出层 */
.slogan {
    height: 50rpx;
    line-height: 50rpx;
    padding-left: 50rpx;
    background: rgb(228, 162, 162);
}
.left-title {
    margin-left: 5%;
    height: 50rpx;
    line-height: 50rpx;
}
.tanchumap {
    width: 90%;
    height: 415rpx;
    border-radius: 20rpx;
    overflow: hidden;
    margin-left: 5%;
}
</style>
